<ng-container *ngIf="item" [ngSwitch]="item.type">
    <span [id]="groupIndex+'_'+item.key"></span>

    <ng-container *ngSwitchCase="'radio'">
        <!-- 单选框 -->
        <div>
            <p [ngClass]="item.isRequird?'ant-form-item-required':''">
                <nz-tag [nzColor]="'purple'">{{l('Radio')}}</nz-tag>
                <!-- 题目 -->
                <span nz-typography nzSize="small" class="font-weight-bold" [(nzEditable)]="isEditor" [(nzContent)]="item.title"></span>
            </p>
            <div>
                <div nzSpan="10">
                    <nz-radio-group class=" mt-xs" [(ngModel)]="item.value" [nzDisabled]="isReadOnly||isEditor">
                        <ng-container *ngFor="let opt of item.options">
                            <label nz-radio [nzValue]="opt.key" style="margin-bottom: 10px;">
                                <span nz-typography nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="opt.title" style="margin-bottom: 10px;"></span>
                            </label>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="text" nz-input nzSize="small" *ngIf="item.supplement&&item.options[item.options.length-1].key == opt.key&&opt.key===item.value" style="width: 200px; margin-right: 10px;" [readonly]="isEditor||isReadOnly" [placeholder]="l('选项备注')" [(ngModel)]="item.supplementValue" />
                            <ng-container *ngIf="isEditor">
                                <input nz-input nzSize="small" type="number" style="width: 5em;" minValue="0" [(ngModel)]="opt.score" [placeholder]="l('Grade')" /> {{l('Mark')}}
                                <a class="DeleteButton" nz-tooltip [nzTooltipTitle]="l('Delete option')" (click)="item.removeOption(opt.key,item.key,formJson)">
                                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                                </a>
                                <a style="margin-left: 10px;" nz-tooltip [nzTooltipTitle]="l('添加选项附加题')" (click)="addProItem(opt)">
                                    <i nz-icon nzType="share-alt" nzTheme="outline"></i>
                                </a>
                            </ng-container>
                            <br>
                        </ng-container>
                    </nz-radio-group>
                </div>
            </div>

            <div nz-button nzShape="circle" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Add option')" *ngIf="isEditor" (click)="item.addOption()" class="mb-sm mt-xs">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
            </div>
            <div *ngIf="isEditor">
                <nz-switch [(ngModel)]="item.supplement" nz-tooltip [nzTooltipTitle]="l('You can enter content when the last option is selected')" [nzCheckedChildren]="l('Optional Remarks')" [nzUnCheckedChildren]="l('Close Options Remarks')"></nz-switch>
                &nbsp;&nbsp;
                <nz-switch [(ngModel)]="item.isRequird" nz-tooltip [nzTooltipTitle]="l('It is required after opening')" [nzCheckedChildren]="l('Required')" [nzUnCheckedChildren]="l('Not required')"></nz-switch>
                <div nz-button nzShape="circle" nzType="danger" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Delelte title')" (click)="this.formJson.removeItem(item.key)">
                    <i *ngIf="isEditor" nz-icon nzType="delete" nzTheme="outline"></i>
                </div>
                <div nz-button nzType="primary" nzShape="circle" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Save as subject')" *ngIf="isEditor" (click)="getItem(item)">
                    <i nz-icon nzType="save" nzTheme="outline"></i>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'ckeckBox'">
        <!-- 多选框 -->
        <div>
            <p [ngClass]="item.isRequird?'ant-form-item-required':''">
                <nz-tag [nzColor]="'magenta'">{{l('MultiSelect')}}</nz-tag>
                <!-- 题目 -->
                <span nz-typography class="font-weight-bold" nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="item.title"></span>
            </p>
            <div>
                <div nzSpan="10" class=" mt-xs" *ngFor="let opt of item.options">
                    <label nz-checkbox (ngModelChange)="onCheckBoxChange(item,opt,$event)" [disabled]="opt.disable||isReadOnly||isEditor" [(ngModel)]="opt.checked"><span nz-typography nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="opt.title" style="margin-bottom: 10px;"></span></label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="text" nz-input nzSize="small" *ngIf="item.supplement&&item.options[item.options.length-1].key == opt.key&&opt.checked" style="width:200px;margin-right: 10px;" [placeholder]="l('PleaseInput')" [(ngModel)]="item.supplementValue" />
                    <ng-container *ngIf="isEditor">
                        <input nz-input nzSize="small" type="number" style="width: 5em;" minValue="0" [(ngModel)]="opt.score" [placeholder]="l('Grade')" />{{l('Mark')}}
                        <a class="DeleteButton" nz-tooltip [nzTooltipTitle]="l('Delete option')" (click)="item.removeOption(opt.key,item.key,formJson)">
                            <i nz-icon nzType="delete" nzTheme="outline"></i>
                        </a>
                        <a style="margin-left: 10px;" nz-tooltip [nzTooltipTitle]="l('添加选项附加题')" (click)="addProItem(opt)">
                            <i nz-icon nzType="share-alt" nzTheme="outline"></i>
                        </a>
                    </ng-container>
                </div>
            </div>
            <div nz-button nzShape="circle" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Add option')" *ngIf="isEditor" (click)="item.addOption()" class="mt-xs">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
            </div>
            <div *ngIf="isEditor">
                {{l('Maximum number of options')}}&nbsp;<input nz-input nzSize="small" type="number" style="width: 5em;" [(ngModel)]="item.maxSelected" [placeholder]="l('The largest optional')" />
                &nbsp;
                <nz-switch [(ngModel)]="item.supplement" nz-tooltip [nzTooltipTitle]="l('You can enter content when the last option is selected')" [nzCheckedChildren]="l('Optional Remarks')" [nzUnCheckedChildren]="l('Close Options Remarks')"></nz-switch>
                &nbsp;&nbsp;
                <nz-switch [(ngModel)]="item.isRequird" nz-tooltip [nzTooltipTitle]="l('It is required after opening')" [nzCheckedChildren]="l('Required')" [nzUnCheckedChildren]="l('Not required')"></nz-switch>
                <div nz-button nzShape="circle" nzSize="small" nzType="danger" nz-tooltip [nzTooltipTitle]="l('Delelte title')" (click)="this.formJson.removeItem(item.key)">
                    <i *ngIf="isEditor" nz-icon nzType="delete" nzTheme="outline"></i>
                </div>
                <div nz-button nzType="primary" nzShape="circle" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Save as subject')" *ngIf="isEditor" (click)="getItem(item)">
                    <i nz-icon nzType="save" nzTheme="outline"></i>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'input'">
        <!-- 输入框 -->
        <div>
            <p [ngClass]="item.isRequird?'ant-form-item-required':''">
                <nz-tag [nzColor]="'cyan'">{{l('short text')}}</nz-tag>
                <!-- 题目 -->
                <span nz-typography class="font-weight-bold" nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="item.title"></span>
            </p>
            <input nz-input nzSize="small" [readonly]="isEditor||isReadOnly" [(ngModel)]="item.value" class=" mt-xs" [placeholder]="l('PleaseInput')" />
            <div class="mt-md" *ngIf="isEditor">
                <nz-switch [(ngModel)]="item.isRequird" nz-tooltip [nzTooltipTitle]="l('It is required after opening')" [nzCheckedChildren]="l('Required')" [nzUnCheckedChildren]="l('Not required')"></nz-switch>
                <div nz-button nzShape="circle" nzType="danger" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Delete title')" (click)="this.formJson.removeItem(item.key)">
                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                </div>
                <div nz-button nzType="primary" nzShape="circle" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Save as subject')" *ngIf="isEditor" (click)="getItem(item)">
                    <i nz-icon nzType="save" nzTheme="outline"></i>
                </div>
            </div>

        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'text'">
        <!-- 文本域 -->
        <div>
            <p [ngClass]="item.isRequird?'ant-form-item-required':''">
                <nz-tag [nzColor]="'blue'">{{l('long text')}}</nz-tag>
                <!-- 题目 -->
                <span nz-typography class="font-weight-bold" nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="item.title"></span>
            </p>
            <textarea nz-input nzSize="small" [readonly]="isEditor||isReadOnly" [(ngModel)]="item.value" [nzAutosize]="{ minRows: 2, maxRows: 6 }" class=" mt-xs" [placeholder]="l('PleaseInput')"></textarea>
            <div class="mt-md" *ngIf="isEditor">
                <nz-switch [(ngModel)]="item.isRequird" nz-tooltip [nzTooltipTitle]="l('It is required after opening')" [nzCheckedChildren]="l('Required')" [nzUnCheckedChildren]="l('Not required')"></nz-switch>
                <div *ngIf="isEditor" nz-button nzShape="circle" nzType="danger" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Delelte title')" (click)="this.formJson.removeItem(item.key)">
                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                </div>
                <div nz-button nzType="primary" nzShape="circle" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Save as subject')" *ngIf="isEditor" (click)="getItem(item)">
                    <i nz-icon nzType="save" nzTheme="outline"></i>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'file-doc'">
        <!-- 文档 -->
        <div [ngClass]="isReadOnly?'ant-upload-hidden':''">
            <nz-tag [nzColor]="'orange'">{{l('document')}}</nz-tag>
            <!-- 题目 -->
            <span nz-typography class="font-weight-bold" nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="item.title"></span>
            <nz-upload [nzFileList]="item.files" [nzBeforeUpload]="fileUploadBefor" (nzChange)="fileUploadChange($event,item)" [nzAction]="fileUploadUrl" [nzHeaders]="fileUploadHeader" [nzAccept]="item.fileAccept" nzMultiple [nzSize]="item.fileSize" [nzRemove]="fileRemove(item)" [nzLimit]="item.fileLimit">
                <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
            </nz-upload>
            <div *ngIf="isEditor">
                <div nz-button nzShape="circle" nzType="danger" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Delete title')" (click)="this.formJson.removeItem(item.key)">
                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                </div>
                <nz-switch [(ngModel)]="item.isRequird" nz-tooltip [nzTooltipTitle]="l('It is required after opening')" [nzCheckedChildren]="l('Required')" [nzUnCheckedChildren]="l('Not required')"></nz-switch>
            </div>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'file-image'">
        <!-- 图片控件 -->
        <div [ngClass]="isReadOnly?'ant-upload-hidden':''">
            <nz-tag [nzColor]="'green'">{{l('image')}}</nz-tag>
            <!-- 题目 -->
            <span nz-typography class="font-weight-bold" nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="item.title"></span>
            <nz-upload [nzFileList]="item.files" [nzBeforeUpload]="fileUploadBefor" (nzChange)="fileUploadChange($event,item)" [nzAction]="fileUploadUrl" [nzHeaders]="fileUploadHeader" [nzAccept]="item.fileAccept" nzListType="picture-card" nzMultiple [nzSize]="item.fileSize" [nzRemove]="fileRemove(item)" [nzLimit]="item.fileLimit">
                <div>
                    <i nz-icon nzType="plus"></i>
                    <div style="margin-top: 8px">Upload</div>
                </div>
            </nz-upload>
            <div *ngIf="isEditor">
                <div nz-button nzShape="circle" nzType="danger" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Delete title')" (click)="this.formJson.removeItem(item.key)">
                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                </div>
                <nz-switch [(ngModel)]="item.isRequird" nz-tooltip [nzTooltipTitle]="l('It is required after opening')" [nzCheckedChildren]="l('Required')" [nzUnCheckedChildren]="l('Not required')"></nz-switch>
            </div>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'file-video'">
        <!-- 视频控件 -->
        <div>
            <p>{{item.title}}</p>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'file-voice'">
        <!-- 音频控件 -->
        <div>
            <p>{{item.title}}</p>
        </div>
    </ng-container>

    <ng-container *ngSwitchCase="'file-zip'">
        <!-- 压缩文件控件 -->
        <div>
            <p>{{item.title}}</p>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'text-content'">
        <!-- 文字说明 -->
        <div>
            <span nz-typography class="font-weight-bold" nzSize="small" [(nzEditable)]="isEditor" [(nzContent)]="item.title"></span>
            <div *ngIf="isEditor">
                <div nz-button nzShape="circle" nzType="danger" nzSize="small" nz-tooltip [nzTooltipTitle]="l('Delete title')" (click)="this.formJson.removeItem(item.key)">
                    <i nz-icon nzType="delete" nzTheme="outline"></i>
                </div>
            </div>
        </div>
    </ng-container>
    <ng-container *ngSwitchCase="'blank'">
        <!-- 空白 -->
        <div style="height: 2em;">
        </div>
    </ng-container>

</ng-container>
<nz-modal [(nzVisible)]="isShowTypeModal" [nzTitle]="l('Select the type of component to create')" [nzMaskClosable]="true" (nzOnCancel)="isShowTypeModal=false" (nzOnOk)="isShowTypeModal=false">
    <div class="controlButtons">
        <button nz-button nzType="default" (click)="addItem('radio')">{{l('Radio')}}</button>
        <button nz-button nzType="default" (click)="addItem('ckeckBox')">{{l('MultiSelect')}}</button>
        <button nz-button nzType="default" (click)="addItem('input')">{{l('Input')}}</button>
        <button nz-button nzType="default" (click)="addItem('text')">{{l('Textarea')}}</button>
        <button nz-button nzType="default" (click)="addItem('file-doc')">{{l('Doc upload')}}</button>
        <button nz-button nzType="default" (click)="addItem('file-image')">{{l('Image upload')}}</button>
        <button nz-button nzType="default" (click)="addGroup()">{{l('Grouping')}}</button>
        <button nz-button nzType="default" (click)="addItem('text-content')">{{l('TextDescription')}}</button>
        <button nz-button nzType="default" (click)="addItem('blank')">{{l('Blank')}}</button>
    </div>
</nz-modal>
